<script setup lang="ts">
import { ref } from "vue";
import { usePlan } from "./hook";
import { emitter } from "@/utils/mitt";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import WangEditor from "@/components/wangEditor/index.vue";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Search from "@iconify-icons/ep/search";
import AddFill from "@iconify-icons/ri/add-circle-line";

const addDtoRef = ref();
const {
  form,
  loading,
  columns,
  dataList,
  planList,
  STaskList,
  isDisabled,
  pagination,
  loadingTitle,
  SelectItemList,
  multipleTableRef,
  updatePanelVisible,
  rules,
  onSearch,
  ViewDetails,
  // resetForm,
  handleUpdate,
  handleDelete,
  SettingIsEdit,
  handleSizeChange,
  ClosePanelVisible,
  handleCurrentChange,
  addPlan,
  handleShowScore,
  scoreArr
} = usePlan();

</script>

<template>
  <div class="main">
    <el-form ref="addDtoRef" :inline="true" class="bg-bg_color w-[99/100] pl-4 pt-4">
      <el-form-item label="计划名称">
        <el-select style="width: 180px" placeholder="请选择" filterable clearable v-model="STaskList.planId"
          @change="handleShowScore()">
          <el-option v-for="plan in planList" :key="plan.planId" :label="plan.planName" :value="plan.planId" />
        </el-select>
      </el-form-item>
      <el-form-item label="模块名称">
        <el-select style="width: 180px" placeholder="请选择" filterable clearable v-model="STaskList.moduleId">
          <el-option v-for="plan in SelectItemList" :key="plan.entityId" :label="plan.selectName"
            :value="plan.selectId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="ml-3" type="primary" :icon="useRenderIcon(Search)" @click="onSearch(1)">
          搜索
        </el-button>
      </el-form-item>

    </el-form>

    <PureTableBar title="任务设置" class="h100-80">
      <template #buttons>
        <div class="isitem">
          <span v-for="item in scoreArr" v-if="STaskList.planId" class="score_item">
            {{ item.moduleName }}
            ：
            {{ item.score }}
            分
          </span>
        </div>
        <el-button type="primary" @click="handleUpdate(undefined)" :icon="useRenderIcon(AddFill)"
          :disabled="SettingIsEdit">
          添加任务
        </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" highlight-current-row
          :loading="loading" size="small" :data="dataList" :columns="columns" :checkList="checkList"
          ref="multipleTableRef" :pagination="pagination" max-height="350" @cell-dblclick="handleUpdate"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange" @cell-click="ViewDetails">
          <template #operation="{ row }">
            <el-button class="reset-margin" link type="primary" :size="size" :icon="useRenderIcon(EditPen)"
              @click="handleUpdate(row)" :disabled="row.isTemplate ? !(row.isEdit == 1) : false">
              修改
            </el-button>
            <el-button class="reset-margin" link type="danger" @click="handleDelete(row)" :size="size"
              :icon="useRenderIcon(Delete)" :disabled="row.isTemplate ? !(row.isDelete == 1) : false">
              删除
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>


    <!-- 任务明细 loading -->
    <el-dialog top="5vh" @close="ClosePanelVisible(addDtoRef)" :close-on-click-modal="false" v-model="updatePanelVisible"
      :title="loadingTitle" width="55%" center>
      <el-scrollbar height="600px">
        <el-form ref="addDtoRef" label-position="left" label-width="100px" :rules="rules" :model="form">
          <el-form-item label="模块名称" prop="moduleId">
            <el-select placeholder="请选择" filterable v-model="form.moduleId" :disabled="isDisabled" class="w-220">
              <el-option v-for="plan in SelectItemList" :key="plan.entityId" :label="plan.selectName"
                :value="plan.selectId" />
            </el-select>
          </el-form-item>
          <el-form-item label="任务名称" prop="taskName">
            <el-input class="w-220" v-model="form.taskName" />
          </el-form-item>
          <el-form-item label="任务说明" prop="remark" v-if="updatePanelVisible">
            <wang-editor v-model="form.remark" :height="200" />
          </el-form-item>
          <el-form-item label="重要提示" prop="important" v-if="updatePanelVisible">
            <wang-editor v-model="form.important" :height="200" />
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="addPlan(addDtoRef)" :disabled="form.isTemplate ? !(form.isEdit == 1) : false">
            保存
          </el-button>
          <el-button @click="ClosePanelVisible(addDtoRef)">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form-item__label) {
  font-weight: 700
}

:deep(.el-dialog__body) {
  display: flex;
  justify-content: center;
  align-items: center;
}


.h100-80 {
  .pure-table {
    height: calc(100% - 60px);

    :deep(.el-table--fit) {
      height: calc(100% - 60px);
    }
  }
}

.score_item {
  color: red;
  margin-left: 10px;
}

.isitem {
  position: absolute;
  width: fit-content;
  left: 120px;
  line-height: 28px;
  font-weight: bold;
}

@media screen and (max-width:1600px) {
  .isitem {
    font-size: 14px;
  }
}
</style>
